<template>
    <view class="chooseBox">
		<view class="rightswitch" :class="{'slectsdon':showststus?'slectsdon': ''}" @click="open">
			<view class="title"><text class="title-content">{{chooseTitle}} </text><text class="iconfont chooseBox-iconfont"> &#xe718;</text></view>
		</view>
		<view v-if="showststus" class="showBox" :style="{top}">
			<slot></slot>
		</view>
		<view v-if="showststus" class="mark" :style="{top}" @click="close"></view>
	</view>
</template>

<script>
export default {
	name: 'chooseCode',
	props: {
		chooseTitle: {
			type: String,
			default: ''
		},
		isOpen: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			showststus: false,
			top: '0'
		}
	},
	methods: {
		open() {
			this.showststus = !this.showststus
			const query = uni.createSelectorQuery().in(this)
			query.select('.rightswitch').boundingClientRect(data => {
				console.log(data)
				this.top = (data.bottom) + 'px'
			}).exec()
		},
		close() {
			this.showststus = false
		}

	},
	watch: {
		showststus(val) {
			this.$emit('update:isOpen', val)
		}
	}
}
</script>

<style scoped lang="scss">
	.chooseBox{
		.rightswitch {
			height: 70px;
			line-height: 70px;
			float: right;
		}
		.title-content{
			padding-right: 15px;
		}
		.slectsdon {
			.title{
				color: rgb(25, 137, 250);
				.chooseBox-iconfont{
					transform:rotateZ(180deg);
					transform-origin:50% 50%;
					transition: all 0.5s;
				}
			}
		}
		.showBox{
			position: fixed;
			left: 0;
			z-index: 999;
		}
		.mark{
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.5);
			width: 100%;
			height: 100vh;
			z-index: 888;
		}
	}

</style>
